<template>
    <div class="report">
        <div class="report-left">
            <div class="header">人车匹配度报告</div>
            <div class="info-card">
                <el-descriptions title="申请人基础信息" direction="horizontal" :column="1" size="large" border>
                    <el-descriptions-item label="姓名">{{ data.name }}</el-descriptions-item>
                    <el-descriptions-item label="性别">{{ data.sex }}</el-descriptions-item>
                    <el-descriptions-item label="年龄">{{ data.age }}</el-descriptions-item>
                    <el-descriptions-item label="身高">{{ data.height }}</el-descriptions-item>
                    <el-descriptions-item label="体重">{{ data.weight }}</el-descriptions-item>
                    <el-descriptions-item label="收入">{{ data.income }}</el-descriptions-item>
                    <el-descriptions-item label="手机型号">{{ data.phone }}</el-descriptions-item>
                    <el-descriptions-item label="手机价位">{{ data.phonePrice }}</el-descriptions-item>
                </el-descriptions>

                <el-descriptions title="车辆信息" direction="horizontal" :column="1" size="large" border>
                    <el-descriptions-item label="车型">{{ data.carModel }}</el-descriptions-item>
                    <el-descriptions-item label="车型长宽高">{{ data.carSize }}</el-descriptions-item>
                </el-descriptions>
            </div>

        </div>
        <div class="report-right">
            <div class="header">人车匹配度</div>
            <div class="compatibility">
                <div class="slider-block">
                    <span
                        class="demonstration">年龄匹配度&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;弱&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <el-slider v-model="compatibility.age" disabled max="1" />
                    <span class="demonstration">&nbsp;&nbsp;&nbsp;&nbsp;强</span>
                </div>
                <div class="slider-block">
                    <span
                        class="demonstration">性别匹配度&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;弱&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <el-slider v-model="compatibility.sex" disabled max="1" />
                    <span class="demonstration">&nbsp;&nbsp;&nbsp;&nbsp;强</span>
                </div>
                <div class="slider-block">
                    <span
                        class="demonstration">收入匹配度&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;弱&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <el-slider v-model="compatibility.income" disabled max="1" />
                    <span class="demonstration">&nbsp;&nbsp;&nbsp;&nbsp;强</span>
                </div>
                <div class="slider-block">
                    <span
                        class="demonstration">体型匹配度&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;弱&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <el-slider v-model="compatibility.body" disabled max="1" />
                    <span class="demonstration">&nbsp;&nbsp;&nbsp;&nbsp;强</span>
                </div>
            </div>

            <div class="echarts-header">数据分析结果</div>
            <div class="echarts-table">
                <div ref="chartRef" style="width: 700px; height: 600px;"></div>
            </div>
        </div>
    </div>

</template>
<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';

import { useRoute } from 'vue-router'
const router = useRoute()

let data = ref({})
const allData = ref([
    {
        "orderNo": "B001",
        "name": "李明辉",
        "sex": "男",
        "age": "21",
        "height": "180cm",
        "weight": "82kg",
        "income": "4875元/月",
        "phone": "小米",
        "phonePrice": "2000元以下",
        "carModel": "本田雅阁",
        "carSize": "4893mm×1862mm×1449mm"
    },
    {
        "orderNo": "B002",
        "name": "张婉婷",
        "sex": "女",
        "age": "23",
        "height": "171cm",
        "weight": "52kg",
        "income": "5875元/月",
        "phone": "小米",
        "phonePrice": "3000元以下",
        "carModel": "丰田凯美瑞",
        "carSize": "4980mm×1862mm×1449mm"
    },
    {
        "orderNo": "B003",
        "name": "王志强",
        "sex": "男",
        "age": "29",
        "height": "174cm",
        "weight": "77kg",
        "income": "10175元/月",
        "phone": "荣耀",
        "phonePrice": "4000元以下",
        "carModel": "宝马X1",
        "carSize": "4565mm×1821mm×1620mm"
    },
    {
        "orderNo": "B004",
        "name": "刘晓燕",
        "sex": "女",
        "age": "31",
        "weight": "62kg",
        "height": "169cm",
        "income": "20175元/月",
        "phone": "华为",
        "phonePrice": "8000元以下",
        "carModel": "奥迪A4L",
        "carSize": "4858mm×1847mm×1439mm"
    },
    {
        "orderNo": "B005",
        "name": "陈思远",
        "sex": "男",
        "age": "27",
        "weight": "94kg",
        "height": "184cm",
        "income": "18175元/月",
        "phone": "苹果",
        "phonePrice": "6000元以下",
        "carModel": "奔驰C级",
        "carSize": "4686mm×1810mm×1442mm"
    },
    {
        "orderNo": "B006",
        "name": "杨乐乐",
        "sex": "男",
        "age": "37",
        "weight": "89kg",
        "height": "188cm",
        "income": "58175元/月",
        "phone": "华为",
        "phonePrice": "20000元以下",
        "carModel": "路虎发现神行",
        "carSize": "4600mm×1894mm×1700mm"
    },
    {
        "orderNo": "B007",
        "name": "赵梓轩",
        "sex": "女",
        "age": "30",
        "weight": "42kg",
        "height": "155cm",
        "income": "8175元/月",
        "phone": "华为",
        "phonePrice": "3000元以下",
        "carModel": "特斯拉Model 3",
        "carSize": "4724mm×1848mm×1430mm"
    },
    {
        "orderNo": "B008",
        "name": "黄雅静",
        "sex": "女",
        "age": "30",
        "weight": "60kg",
        "height": "162cm",
        "income": "6175元/月",
        "phone": "小米",
        "phonePrice": "2000元以下",
        "carModel": "比亚迪秦Pro",
        "carSize": "4765mm×1837mm×1495mm"
    },
    {
        "orderNo": "B009",
        "name": "周俊杰",
        "sex": "男",
        "age": "26",
        "weight": "71kg",
        "height": "177cm",
        "income": "6175元/月",
        "phone": "OPPO",
        "phonePrice": "2000元以下",
        "carModel": "大众帕萨特",
        "carSize": "4865mm×1832mm×1486mm"
    },
    {
        "orderNo": "B010",
        "name": "吴梦琪",
        "sex": "女",
        "age": "46",
        "weight": "52kg",
        "height": "163cm",
        "income": "88175元/月",
        "phone": "苹果",
        "phonePrice": "10000元以下",
        "carModel": "宝马X5",
        "carSize": "4930mm×2004mm×1776mm"
    },
    {
        "orderNo": "B011",
        "name": "徐浩然",
        "sex": "男",
        "age": "49",
        "weight": "69kg",
        "height": "176cm",
        "income": "108175元/月",
        "phone": "苹果",
        "phonePrice": "12000元以下",
        "carModel": "奔驰E级",
        "carSize": "5092mm×1880mm×1493mm"
    },
    {
        "orderNo": "B012",
        "name": "孙嘉欣",
        "sex": "女",
        "age": "29",
        "weight": "62kg",
        "height": "177cm",
        "income": "18175元/月",
        "phone": "小米",
        "phonePrice": "5000元以下",
        "carModel": "奥迪Q5L",
        "carSize": "4770mm×1893mm×1667mm"
    },
    {
        "orderNo": "B013",
        "name": "胡雨婷",
        "sex": "女",
        "age": "32",
        "weight": "65kg",
        "height": "167cm",
        "income": "18185元/月",
        "phone": "华为",
        "phonePrice": "8000元以下",
        "carModel": "雷克萨斯ES",
        "carSize": "4975mm×1865mm×1445mm"
    },
    {
        "orderNo": "B014",
        "name": "朱志豪",
        "sex": "男",
        "age": "32",
        "weight": "86kg",
        "height": "181cm",
        "income": "15000元/月",
        "phone": "苹果",
        "phonePrice": "7000元以下",
        "carModel": "沃尔沃XC60",
        "carSize": "4688mm×1902mm×1658mm"
    },
    {
        "orderNo": "B015",
        "name": "高欣怡",
        "sex": "女",
        "age": "35",
        "weight": "49kg",
        "height": "158cm",
        "income": "10000元/月",
        "phone": "小米",
        "phonePrice": "4000元以下",
        "carModel": "吉利博越",
        "carSize": "4510mm×1865mm×1650mm"
    },
    {
        "orderNo": "B016",
        "name": "郭子轩",
        "sex": "男",
        "age": "25",
        "weight": "63kg",
        "height": "170cm",
        "income": "12000元/月",
        "phone": "小米",
        "phonePrice": "6000元以下",
        "carModel": "日产天籁",
        "carSize": "4900mm×1860mm×1450mm"
    },
    {
        "orderNo": "B017",
        "name": "曹雨萱",
        "sex": "女",
        "age": "35",
        "weight": "61kg",
        "height": "170cm",
        "income": "12000元/月",
        "phone": "苹果",
        "phonePrice": "6000元以下",
        "carModel": "马自达CX-5",
        "carSize": "4555mm×1842mm×1685mm"
    },
    {
        "orderNo": "B018",
        "name": "许浩然",
        "sex": "男",
        "age": "25",
        "weight": "86kg",
        "height": "185cm",
        "income": "9000元/月",
        "phone": "华为",
        "phonePrice": "6000元以下",
        "carModel": "福特锐界",
        "carSize": "5000mm×1961mm×1773mm"
    },
    {
        "orderNo": "B019",
        "name": "韩雪梅",
        "sex": "女",
        "age": "31",
        "weight": "55kg",
        "height": "160cm",
        "income": "7000元/月",
        "phone": "红米",
        "phonePrice": "3000元以下",
        "carModel": "雪佛兰科迈罗",
        "carSize": "4786mm×1897mm×1356mm"
    },
    {
        "orderNo": "B020",
        "name": "冯思琪",
        "sex": "女",
        "age": "27",
        "weight": "60kg",
        "height": "172cm",
        "income": "6000元/月",
        "phone": "苹果",
        "phonePrice": "15000元以下",
        "carModel": "保时捷718",
        "carSize": "4379mm×1801mm×1276mm"
    }
])
const compatibility = ref({})
const compatibilityList = ref([
    {
        "orderNo": "B001",
        "body": 0.34073482387258275,
        "income": 0.571781621800037,
        "age": 0.39392910346709403,
        "sex": 0.6757480040910384
    },
    {
        "orderNo": "B002",
        "body": 0.5135260964588261,
        "income": 0.6559759359432128,
        "age": 0.4375633685750139,
        "sex": 0.2473158084810502
    },
    {
        "orderNo": "B003",
        "body": 0.337811658715355,
        "income": 0.6429969206976407,
        "age": 0.6558980912176733,
        "sex": 0.6709463333972496
    },
    {
        "orderNo": "B004",
        "body": 0.5844878480696558,
        "income": 0.27133199826361315,
        "age": 0.7856663491892122,
        "sex": 0.2473158084810502
    },
    {
        "orderNo": "B005",
        "body": 0.24224101800025813,
        "income": 0.3089685619025172,
        "age": 0.5620838168575744,
        "sex": 0.6757480040910384
    },
    {
        "orderNo": "B006",
        "body": 0.2284764920850117,
        "income": 0.07677997654889542,
        "age": 0.6663972157906043,
        "sex": 0.6659842454136676
    },
    {
        "orderNo": "B007",
        "body": 0.20890307365185368,
        "income": 0.9919083999399518,
        "age": 0.7146036010928175,
        "sex": 0.2473158084810502
    },
    {
        "orderNo": "B008",
        "body": 0.49900363427080974,
        "income": 0.6884409690725084,
        "age": 0.7096843638298098,
        "sex": 0.24879884119609716
    },
    {
        "orderNo": "B009",
        "body": 0.5421224189552205,
        "income": 0.6862927264092508,
        "age": 0.5247508200602534,
        "sex": 0.6757480040910384
    },
    {
        "orderNo": "B010",
        "body": 0.31120451092421575,
        "income": 0.039864051286128056,
        "age": 0.36311935944006474,
        "sex": 0.25192258909231685
    },
    {
        "orderNo": "B011",
        "body": 0.624188793320334,
        "income": 0.03957635546450852,
        "age": 0.33767014916052274,
        "sex": 0.6725510160123875
    },
    {
        "orderNo": "B012",
        "body": 0.578810204284383,
        "income": 0.2929824589857941,
        "age": 0.6634550586878406,
        "sex": 0.2502660329148751
    },
    {
        "orderNo": "B013",
        "body": 0.6937773051535515,
        "income": 0.2900304790042511,
        "age": 0.8736465314591695,
        "sex": 0.24842338858655852
    },
    {
        "orderNo": "B014",
        "body": 0.30850175319441825,
        "income": 0.3773163314012983,
        "age": 0.8854958694853468,
        "sex": 0.6659842454136676
    },
    {
        "orderNo": "B015",
        "body": 0.40993460643733465,
        "income": 0.6623630987657656,
        "age": 0.8124054369862576,
        "sex": 0.2487880971254534
    },
    {
        "orderNo": "B016",
        "body": 0.6546567462667667,
        "income": 0.5404082983977765,
        "age": 0.4920681854753985,
        "sex": 0.6757480040910384
    },
    {
        "orderNo": "B017",
        "body": 0.5948696954268088,
        "income": 0.4927516796051415,
        "age": 0.8124054369862576,
        "sex": 0.2487880971254534
    },
    {
        "orderNo": "B018",
        "body": 0.26262045063458295,
        "income": 0.8273777419976387,
        "age": 0.4972168532066487,
        "sex": 0.6659842454136676
    },
    {
        "orderNo": "B019",
        "body": 0.3630446092033477,
        "income": 0.7322767925311259,
        "age": 0.6943622876956574,
        "sex": 0.25717866513321114
    },
    {
        "orderNo": "B020",
        "body": 0.7381138816401027,
        "income": 0.6161961086133545,
        "age": 0.51586904187579,
        "sex": 0.25717866513321114
    }
])
// 创建一个响应式引用来存储DOM元素
const chartRef = ref(null)
onMounted(() => {

    data.value = allData.value.filter(d => {
        return d.orderNo === router.query.orderNo
    })[0]

    compatibility.value = compatibilityList.value.filter(d => {
        return d.orderNo === router.query.orderNo
    })[0]
    // 确保DOM元素已经挂载
    if (chartRef.value) {
        // 初始化echarts实例
        const myChart = echarts.init(chartRef.value)
        // 配置echarts选项
        const option = {
            title: {
                text: "对应分析（CA）标签二维投影图",
                left: 260

            },
            legend: {
                show: true, // 显示图例
                orient: 'horizontal', // 图例排列方式
                top: 'bottom',
                x: 'center', // 图例的水平位置
                y: '50', // 图例的垂直位置
                padding: 5, // 图例内边距
                itemGap: 10, // 图例每项之间的间隔
                // width: 600,
                // height: 200,
                data: ['性别', "婚姻状况", "居住情况", "汽车大小", "轿车类型", "收入情况"] // 图例数据
            },
            xAxis: {
                name: "CA1"
            },
            yAxis: {
                name: "CA2"
            },
            series: [
                {
                    data: [
                        [
                            -0.440714744411444,
                            0.27740127481249316
                        ]
                    ],
                    symbolSize: 20,
                    label: {
                        show: true,
                        formatter: "女性"
                    },
                    type: "scatter",
                    name: "性别"
                },
                {
                    "data": [
                        [
                            0.3745268157635717,
                            -0.23574027749633109
                        ]
                    ],
                    "symbolSize": 20,
                    "label": {
                        "show": true,
                        "formatter": "男性"
                    },
                    "type": "scatter",
                    "name": "性别"
                },
                {
                    "data": [
                        [
                            -2.1613827224444804,
                            0.7693147828203257
                        ]
                    ],
                    "symbolSize": 20,
                    "label": {
                        "show": true,
                        "formatter": "丧偶"
                    },
                    "type": "scatter",
                    "name": "婚姻状况"
                },
                {
                    "data": [
                        [
                            0.6374203219574619,
                            0.3447722206187502
                        ]
                    ],
                    "symbolSize": 20,
                    "label": {
                        "show": true,
                        "formatter": "已婚"
                    },
                    "type": "scatter",
                    "name": "婚姻状况"
                },
                {
                    "data": [
                        [
                            0.16501411835894136,
                            -0.40676692201691206
                        ]
                    ],
                    "symbolSize": 20,
                    "label": {
                        "show": true,
                        "formatter": "未婚"
                    },
                    "type": "scatter",
                    "name": "婚姻状况"
                },
                {
                    "data": [
                        [
                            -0.3684138516384806,
                            -0.27633558546974435
                        ]
                    ],
                    "symbolSize": 20,
                    "label": {
                        "show": true,
                        "formatter": "离异"
                    },
                    "type": "scatter",
                    "name": "婚姻状况"
                },
                {
                    "data": [
                        [
                            0.17105642034405147,
                            -0.7386276793170141
                        ]
                    ],
                    "symbolSize": 20,
                    "label": {
                        "show": true,
                        "formatter": "农村"
                    },
                    "type": "scatter",
                    "name": "居住情况"
                },
                {
                    "data": [
                        [
                            -0.10940946366161701,
                            0.4724339377449735
                        ]
                    ],
                    "symbolSize": 20,
                    "label": {
                        "show": true,
                        "formatter": "城镇"
                    },
                    "type": "scatter",
                    "name": "居住情况"
                },
                {
                    "data": [
                        [
                            -0.26221209731567197,
                            -0.4477098916537195
                        ]
                    ],
                    "symbolSize": 20,
                    "label": {
                        "show": true,
                        "formatter": "MPV"
                    },
                    "type": "scatter",
                    "name": "轿车类型"
                },
                {
                    "data": [
                        [
                            0.2783728892319414,
                            -0.07434248341294224
                        ]
                    ],
                    "symbolSize": 20,
                    "label": {
                        "show": true,
                        "formatter": "中型SUV"
                    },
                    "type": "scatter",
                    "name": "汽车大小"
                },
                {
                    "data": [
                        [
                            -0.6331168685782375,
                            -0.0013973461613268137
                        ]
                    ],
                    "symbolSize": 20,
                    "label": {
                        "show": true,
                        "formatter": "中型车"
                    },
                    "type": "scatter",
                    "name": "汽车大小"
                },
                {
                    "data": [
                        [
                            -0.4329272507665573,
                            -0.5384244523329345
                        ]
                    ],
                    "symbolSize": 20,
                    "label": {
                        "show": true,
                        "formatter": "中大型SUV"
                    },
                    "type": "scatter",
                    "name": "汽车大小"
                },
                {
                    "data": [
                        [
                            0.6021427756332729,
                            -0.4891764405117914
                        ]
                    ],
                    "symbolSize": 20,
                    "label": {
                        "show": true,
                        "formatter": "中大型车"
                    },
                    "type": "scatter",
                    "name": "汽车大小"
                },
                {
                    "data": [
                        [
                            1.1163512525873975,
                            -0.07870379827642623
                        ]
                    ],
                    "symbolSize": 20,
                    "label": {
                        "show": true,
                        "formatter": "全尺寸SUV"
                    },
                    "type": "scatter",
                    "name": "汽车大小"
                },
                {
                    "data": [
                        [
                            0.15616402863479595,
                            0.16598054690576367
                        ]
                    ],
                    "symbolSize": 20,
                    "label": {
                        "show": true,
                        "formatter": "小型SUV"
                    },
                    "type": "scatter",
                    "name": "汽车大小"
                },
                {
                    "data": [
                        [
                            -0.4619937045039475,
                            0.05268235059953624
                        ]
                    ],
                    "symbolSize": 20,
                    "label": {
                        "show": true,
                        "formatter": "小型车"
                    },
                    "type": "scatter",
                    "name": "汽车大小"
                },
                {
                    "data": [
                        [
                            0.7707777062870239,
                            0.12982510561605415
                        ]
                    ],
                    "symbolSize": 20,
                    "label": {
                        "show": true,
                        "formatter": "微型车"
                    },
                    "type": "scatter",
                    "name": "汽车大小"
                },
                {
                    "data": [
                        [
                            0.23203508844910042,
                            -0.7385471863514323
                        ]
                    ],
                    "symbolSize": 20,
                    "label": {
                        "show": true,
                        "formatter": "微面"
                    },
                    "type": "scatter",
                    "name": "汽车大小"
                },
                {
                    "data": [
                        [
                            -0.47384850559177927,
                            0.28702096303481683
                        ]
                    ],
                    "symbolSize": 20,
                    "label": {
                        "show": true,
                        "formatter": "紧凑型SUV"
                    },
                    "type": "scatter",
                    "name": "汽车大小"
                },
                {
                    "data": [
                        [
                            -0.4624208484640304,
                            0.5271380169731544
                        ]
                    ],
                    "symbolSize": 20,
                    "label": {
                        "show": true,
                        "formatter": "紧凑型车"
                    },
                    "type": "scatter",
                    "name": "汽车大小"
                },
                {
                    "data": [
                        [
                            2.4142484241344566,
                            2.5797347817506098
                        ]
                    ],
                    "symbolSize": 20,
                    "label": {
                        "show": true,
                        "formatter": "豪华车"
                    },
                    "type": "scatter",
                    "name": "轿车类型"
                },
                {
                    "data": [
                        [
                            1.144458884014252,
                            0.41212159843710494
                        ]
                    ],
                    "symbolSize": 20,
                    "label": {
                        "show": true,
                        "formatter": "跑车"
                    },
                    "type": "scatter",
                    "name": "轿车类型"
                },
                {
                    "data": [
                        [
                            -0.3935820273507618,
                            -0.2156524633030637
                        ]
                    ],
                    "symbolSize": 20,
                    "label": {
                        "show": true,
                        "formatter": "中等收入"
                    },
                    "type": "scatter",
                    "name": "收入情况"
                },
                {
                    "data": [
                        [
                            0.5486575590302116,
                            0.40895240875674554
                        ]
                    ],
                    "symbolSize": 20,
                    "label": {
                        "show": true,
                        "formatter": "中高收入"
                    },
                    "type": "scatter",
                    "name": "收入情况"
                },
                {
                    "data": [
                        [
                            -0.15759660591605149,
                            -0.7048026467008928
                        ]
                    ],
                    "symbolSize": 20,
                    "label": {
                        "show": true,
                        "formatter": "低收入"
                    },
                    "type": "scatter",
                    "name": "收入情况"
                },
                {
                    "data": [
                        [
                            0.2749113419705742,
                            1.1128862419943935
                        ]
                    ],
                    "symbolSize": 20,
                    "label": {
                        "show": true,
                        "formatter": "高收入"
                    },
                    "type": "scatter",
                    "name": "收入情况"
                }
            ]
        }

        // 使用配置项和数据显示图表
        myChart.setOption(option)
    }
})
</script>
<style scoped lang="scss">
.report {
    display: flex;
    flex-direction: row;
    height: 1200px;
    overflow: auto;
}

.report-right {
    .header {
        margin-top: 120px;
        margin-left: 100px;
        font-size: 16;
        font-weight: bold;
    }

    .echarts-table {
        margin-left: 70px;
    }

    .compatibility {
        margin-left: 50px;
        margin-top: 40px;
        width: 600px;

        .el-slider {
            width: 300px;
        }
    }

    .echarts-header {
        margin-top: 40px;
        margin-left: 100px;
        font-size: 16;
        font-weight: bold;
    }

    .slider-block {
        display: flex;
        flex-direction: row;
        margin-top: 20px;
        justify-content: center;

        .demonstration {
            align-content: center;
        }
    }

    /* 去掉滑块上的圆点 */
    .el-slider__button-wrapper {
        /* 或者使圆点不显示 */
        display: none;
    }

    .el-slider__runway.is-disabled .el-slider__bar {
        background-color: rgb(0, 82, 217);
    }
}

.report-left {
    width: 50%;
    margin-left: 20px;
    margin-top: 20px;

    .header {
        font-size: 36px;
        /* text-align: center; */
    }

    .el-descriptions {
        margin-top: 40px;

    }

    .annotation {
        color: orange;
    }

    .info-card {
        margin-bottom: 150px;
    }
}
</style>